<template>
  <div class="content">
    <div class="enroll_in">
      <div class="contain">
        <ul>
          <li>
            <img
              src="http://www.duoceshi.com/img/pre_study/employment.jpg"
              alt=""
            />
            <span>一张图看完 <br />多测师学员就业榜</span>
          </li>
          <li>
            <img
              src="http://www.duoceshi.com/img/pre_study/tuition.jpg"
              alt=""
            />
            <span>报名流程</span>
          </li>
          <li>
            <img
              src="http://www.duoceshi.com/img/pre_study/question.jpg"
              alt=""
            />
            <span>学前各种疑问？？ <br />点我</span>
          </li>
          <li>
            <img src="http://www.duoceshi.com/img/pre_study/route.jpg" alt="" />
            <span>在线学习就选 <br />来校路线</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="introduction_in">
      <div class="contain ">
        <h1>什么是软件测试，软件测试是做什么的？</h1>
        <p>
          软件测试其实就是通过一定的工具和方法找出软件的问题，提交给开发修改，保证软件的质量，即软件测试工程师！
        </p>
        <p>何为"多测师"呢？就是多培养一些优秀的测试工程师，就这么简单！</p>
        <div class="vs">
          <div>
            <img src="../../../assets/软件测试正文.png" alt="" />
            <h1>软件测试</h1>
          </div>
          <span>vs</span>
          <div>
            <img src="../../../assets/软件开发.png" alt="" />
            <h1>软件开发</h1>
          </div>
        </div>
      </div>
    </div>
    <div class="advantage">
      <div class="contain">
        <h1>软件测试的优势</h1>
        <ul>
          <li>
            <span>零基础，易入门</span><br /><span
              >学习门槛低，软件测试不同于开发，没有繁杂的代码编写，内容易掌握，零基础可学，学习周期只需两个半月；</span
            >
          </li>
          <li>
            <span>就业率高</span><br /><span
              >在人工智能产业飞速发展下，软件测试和开发扮演同等重要的角色，据统计，中国市场高达30万软件测试的人才缺口；</span
            >
          </li>
          <li>
            <span>高薪资</span><br /><span
              >目前，中高级软件测试工程师的薪酬足以比肩开发人员，甚至超越；多测师毕业的学子平均薪资10000元，轻轻松松成为万元户；</span
            >
          </li>
          <li>
            <span>职业发展前景</span><br /><span
              >双向发展，可根据自身情况选择担当技术骨干，也可晋升为管理层，两者都是公司不可或缺的优质人才；</span
            >
          </li>
          <li>
            <span>福利待遇</span><br /><span
              >五险一金、法定节假日、周末双休，带薪年假，丰厚的年终奖，一年多次调薪，企业组织旅游等；</span
            >
          </li>
          <li>
            <span>弹性工作时间</span><br /><span
              >测试工作量比较小，自由支配时间多，项目上线偶尔加班也可调休或高额加班费，人性化体系；</span
            >
          </li>
        </ul>
      </div>
    </div>
    <div class="prospect">
      <div class="contain">
        <h1>软件测试工程师职业前景</h1>
        <img src="../../../assets/就业前景.png" alt="" />
      </div>
    </div>
    <div class="common_width">
      <div class="contain">
        <h1>阶梯教育就业喜报</h1>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="name" label="姓名"> </el-table-column>
          <el-table-column prop="name" label="学历"> </el-table-column>
          <el-table-column prop="name" label="年龄"> </el-table-column>
          <el-table-column prop="name" label="帅哥/美女"> </el-table-column>
          <el-table-column prop="name" label="专业"> </el-table-column>
          <el-table-column prop="name" label="入职企业"> </el-table-column>
          <el-table-column prop="name" label="月薪"> </el-table-column>
          <el-table-column prop="name" label="地点"> </el-table-column>
          <el-table-column prop="name" label="就业时间"> </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
// import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src

@Component({
  components: {
    // HelloWorld
  }
})
export default class Content extends Vue {
  private tableData: Array<any> = [];
  private created() {
    // for (let index = 0; index < 10; index++) {
    //   this.tableData.push({
    //     name: "张YC" + index
    //   });
    // }
  }
  private mounted() {
    // const dom = document.getElementsByClassName("el-table__body-wrapper")[0];
    // (dom as any).style.position = "relative";
    // (dom as any).style.transition = "1s";
    // (dom as any).style.top = 0;
    // let num = 1;
    // setInterval(() => {
    //   if (num === 10) {
    //     (dom as any).style.top = 0;
    //   } else {
    //     num++;
    //     (dom as any).style.top = -48 * num + "px";
    //   }
    // }, 1000);
  }
}
</script>
<style lang="scss">
.content {
  margin-top: 14px;
  .enroll_in {
    .contain {
      ul {
        display: flex;
        background: #f5f5f5;
        border-radius: 8px;
        padding: 10px 50px;
        li {
          width: 232px;
          height: 100px;
          background: salmon;
          margin: 0 20px;
          border-radius: 8px;
          img {
            float: left;
            margin: 15px 0 0 15px;
            border-radius: 8px;
          }
          span {
            float: left;
            margin: 30px 0 0 10px;
            font-size: 14px;
            color: #fff;
          }
          &:nth-child(1) {
            background: #ea6710;
          }
          &:nth-child(2) {
            background: #948fb7;
          }
          &:nth-child(3) {
            background: #b69a8f;
          }
          &:nth-child(4) {
            background: #48bcb1;
          }
        }
      }
    }
  }
  .introduction_in {
    .contain {
      padding-top: 50px;
      height: 550px;
      background: #f5f5f5;
      margin-top: 10px;
      border-radius: 8px;
      text-align: center;
      p {
        font-family: "宋体";
        /* font-size: 40px; */
        text-align: center;
        line-height: 28px;
        margin: 10px;
        font-size: 20px;
        color: gray;
      }
      .vs {
        width: 950px;
        display: flex;
        margin: 0 auto;
        h1 {
          font-size: 26px;
          font-family: "微软雅黑";
          color: #00aae1;
          font-weight: bold;
        }
        span {
          width: 120px;
          font-size: 60px;
          font-style: italic;
          margin-top: 100px;
        }
      }
    }
  }
  .advantage {
    .contain {
      padding-top: 50px;
      height: 480px;
      background: #f5f5f5;
      margin-top: 10px;
      border-radius: 8px;
      text-align: center;
      ul {
        width: 1000px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        padding-left: 140px;
        li {
          width: 250px;
          height: 150px;
          margin: 0 50px 20px 0;
          transition: 0.5s;
          background: #f56505;
          border-radius: 8px;
          padding-top: 10px;
          span:nth-child(1) {
            font-size: 21px;
            text-align: center;
            margin: auto;
            padding: 0;
            margin: 5px;
            font-family: "黑体";
            color: white;
          }
          span:last-child {
            font-size: 15px;
            line-height: 25px;
            font-family: "宋体";
            font-weight: bold;
            padding: 0 10px;
            color: whitesmoke;
          }
          &:hover {
            transform: scale(1.2);
          }
          &:nth-child(2) {
            background: #948fb7;
            &:hover {
              background: #655d9e;
            }
          }
          &:nth-child(3) {
            background: #b69a8f;
            &:hover {
              background: #ad735c;
            }
          }
          &:nth-child(4) {
            background: #48bcb1;
            &:hover {
              background: #31afa3;
            }
          }
          &:nth-child(5) {
            background: #e46767;
            &:hover {
              background: #de5858;
            }
          }
          &:nth-child(6) {
            background: #46aad8;
            &:hover {
              background: #2293c7;
            }
          }
        }
      }
    }
  }
  .prospect {
    .contain {
      height: 780px;
      background: #f5f5f5;
      margin-top: 10px;
      border-radius: 8px;
      text-align: center;
      border: 1px solid #f5f5f5;
      overflow: hidden;
      h1 {
        font-family: 宋体;
        font-size: 40px;
        text-align: center;
        font-weight: bold;
        padding: 30px 0;
      }
      img {
        width: 100%;
      }
    }
  }
  .common_width {
    .contain {
      // height: 500px;
      background: #f5f5f5;
      margin-top: 10px;
      border-radius: 8px;
      text-align: center;
      border: 1px solid #f5f5f5;
      overflow: hidden;
      .el-table__header-wrapper {
        z-index: 999;
        position: relative;
      }
      .el-table__body-wrapper {
        // transition: 1s;
        // animation: 1s rowup linear infinite normal;
        &:hover {
          // transform: translateY(-48px);
          // animation: 10s rowup linear infinite normal;
        }
      }
    }
  }
}
// @keyframes rowup {
//   0% {
//     top: 0px;
//   }
//   100% {
//     top: -48px;
//     display: none;
//   }
// }
</style>
